<template>
	<div id="RefererOfAWebsite"></div>
</template>
<!--ec官网：https://echarts.apache.org/zh/index.html-->
<script setup name="RefererOfAWebsite">
import {onMounted} from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
	let Echarts = echarts.init(document.getElementById('RefererOfAWebsite'))
	const option = {
		title: {
			text: '',
			subtext: '',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: '50%',
				data: [
					{value: 1048, name: 'Search Engine'},
					{value: 735, name: 'Direct'},
					{value: 580, name: 'Email'},
					{value: 484, name: 'Union Ads'},
					{value: 300, name: 'Video Ads'}
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	}
	// 绘制图表
	Echarts.setOption(option)
	// 自适应大小
	window.onresize = () => {
		Echarts.resize()
	}
})
</script>
